<template>
  <div id="note">
    <p>
      <input type="text" maxlength="11" placeholder="手机号" v-model="tel">
      <span @click="rdm()" :style="{ color: isColor}">获取验证码</span>
    </p>
    <p>
      <input type="password" placeholder="验证码" v-model="pwd">
      <span>{{r}}</span> 
    </p>
    <p>
      温馨提示：未注册饿了么帐号的手机号，登录时将自动注册，且代表您已同
      <a href="//h5.ele.me/service/agreement/">《用户服务协议》</a>
    </p>
    <button @click="judge" ref="login">登录</button>
    <p v-if="txt1">请输入正确手机号</p>
    <p v-if="txt2">请输入正确验证码</p>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'note',
  data () {
    return {
      tel: '',
      pwd: '',
      r: '',
      txt1: false,
      txt2: false
    }
  },
  methods: {
    rdm () {
      if (this.isColor === '#2395ff') {
        var rm = ''
        for (var i = 0; i < 4; i++) {
          var num = Math.floor(Math.random() * 10)
          rm = rm + num
        }
        this.r = rm
      }
    },
    judge () {
      var tel = this.tel
      var pwd = this.pwd
      var telPatern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[05-9]))\d{8}$/
      var pwdPattern = this.r
      if (!telPatern.test(tel)) {
        this.txt1 = true
      } else {
        if (pwd === pwdPattern) {
          axios.get('http://localhost:3000/note', {
            params: {
              tel: tel
            }
          }).then(function (res) {
            console.log(res.data.msg)
            var msg = res.data.msg
            if (msg === 'find') {
              console.log('此用户已注册')
              location.href = 'http://localhost:8080/#/Profile?tel=' + tel
            } else if (msg === 'yes') {
              console.log('注册成功')
              location.href = 'http://localhost:8080/#/Profile?tel=' + tel
            } else {
              alert('网络异常，请稍后重试')
            }
          }).catch(function (err) {
            console.log(err)
          })
        } else {
          this.txt2 = true
        }
      }
    }
  },
  computed: {
    isColor () {
      var telPatern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[05-9]))\d{8}$/
      var tel = this.tel
      if (telPatern.test(tel)) {
        return '#2395ff'
      } else {
        return '#ccc'
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../static/hotcss/px2rem.scss';
#note {
  width: 100%;
  height: px2rem(492);
  font-size: px2rem(24);
  p {
    width: 100%;
    height: px2rem(96);
    margin-top: px2rem(40);
    font-size: px2rem(24);
    span {
      font-size: px2rem(24);
    }
  }
  p:nth-child(1) {
    border: 1px solid #bbb;
    border-radius: px2rem(10);
    display: flex;
    align-items: center;
    position: relative;
    input {
      width: 100%;
      height: px2rem(92);
      border: 0;
      padding-left: px2rem(20);
      font-size: px2rem(24);
      border-radius: px2rem(10);
      outline: none;
      &:focus{
        border: 1px solid #2395ff
      }
    }
    span {
      position: absolute;
      right: 0;
      margin-right: px2rem(20);
      color: #bbb;
    }
  }
  p:nth-child(2) {
    border: 1px solid #bbb;
    border-radius: px2rem(10);
    display: flex;
    align-items: center;
    position: relative;
    input {
      width: 100%;
      height: px2rem(92);
      border: 0;
      padding-left: px2rem(20);
      font-size: px2rem(24);
      border-radius: px2rem(10);
      outline: none;
      &:focus{
        border: 1px solid #2395ff
      }
    }
    span {
      position: absolute;
      right: 0;
      margin-right: px2rem(20);
      color: #bbb;
    }
  }
  p:nth-child(4) {
    color: red;
    text-align: center;
    margin-top: px2rem(200);
  }
  p:nth-child(5) {
    color: red;
    text-align: center;
    margin-top: px2rem(200);
  }
  button {
    width: 100%;
    height: px2rem(84);
    border-radius: px2rem(20);
    background: #00d762;
    font-size: px2rem(32);
    color: #fff;
    border: none;
  }
}
</style>


